
/* 插值 */
@number: 123px;
@key: margin;

.box2 {
    width: @number;
    height: @number;
    @{key}: 0;
}

/* 嵌套  无属性嵌套 */
ul {
    list-style: none;

    li {
        div {
            margin: 10px;
        }
    }

    /* 伪类 */
    &:hover {
        color: aqua;
    }
}

/* 运算 */
.box4 {
    width: @number*3;
    height: @number+10px;
    font: 20px/1.5;
    padding: ~'20px/1.5';
    color: antiquewhite*2;
}

/* 函数 */
.box5 {
    width: round(3.5px);
    margin: sqrt(25%);
    height: sum(3px, 2px);
}

/* 自定义函数 */
@function sum($a, $b) {
    @return $a+$b;
}

/* 混入 */
.show {
    display: none;
}

.hide(@color) {
    display: inline;
    color: @color;
}

.box6 {
    width: 100px;
    .show;
    .hide(blue);
}

/* 命名空间 */
#nm {
    .show {
        display: inline;
    }
}

.box7 {
    #nm.show;
}

/* 继承 */
.line {
    display: inline;
}

.box8 {
    &:extend(.line);
}

/* 合并 */
.box9 {
    background+: url(../CSS/img/1.PNG);
    background+: url(../CSS/img/2.PNG);
    transform+: rotate(30deg);
    transform+: scale(2);
}

/* 条件 */
@count: 5;

.box10 {
    .get(@count);
}

.get(@cn) when(@cn>4) {
    width: 100px+@cn;
}

/* 循环 */
@count2: 0;

.get2(@cn) when(@cn<3) {
    .get2((@cn+1));//递归
    .box-@{cn} {
        width: 100px+@cn;
    }
}
.get2(@count2);

/* 导入 */
@import './01.less';